<template>
  <view class="RefrigeratorBswitch">
    <view class="swirch-card-list">
      <view class="switch-box" v-for="(items, index) in controlList" :key="index" @click="changeContol(items.key)">
        <view class="siwtch-card" :class="{ active: items.key === controlHight }">
          {{ items.name }}
        </view>
        <view
          class="tips-num"
          v-if="items.key === 'RefrigeratorB.RefrigeratorBswitch.StorageManagement.Text' && expiredNum > 0"
        >
          <view class="num-content">{{ expiredNum }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import i18n from '@/i18n'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'
const emit = defineEmits<{
  (e: 'changeComponent', key: string): void
}>()
const props = defineProps<{
  expiredNum: number
  showSaveManger?: boolean
}>()
const controlList = [
  {
    key: 'RefrigeratorB.RefrigeratorBswitch.control.Text',
    name: i18n.global.t('RefrigeratorB.RefrigeratorBswitch.control.Text'),
  },
  {
    key: 'RefrigeratorB.RefrigeratorBswitch.StorageManagement.Text',
    name: i18n.global.t('RefrigeratorB.RefrigeratorBswitch.StorageManagement.Text'),
  },
]
const controlHight = ref('RefrigeratorB.RefrigeratorBswitch.control.Text')
function changeContol(key: string) {
  safeTrack(() => {
    trackEvent(key, {}, TrackType.ApplianceDetail)
  })
  controlHight.value = key
  emit('changeComponent', key)
}

watchEffect(() => {
  if (props.showSaveManger) {
    changeContol(controlList[1].key)
  }
})
</script>
<style lang="less" scoped>
.RefrigeratorBswitch {
  padding: 0 32rpx;
  .swirch-card-list {
    display: flex;
    align-items: center;
    .switch-box {
      display: flex;
      margin-right: 64rpx;
      align-items: center;
    }
    .siwtch-card {
      color: #2d3746;
      opacity: 0.6;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      letter-spacing: -0.5px;
      padding-bottom: 4rpx;
      display: flex;
    }
    .active {
      color: var(--primary-petrol, #2d3746);
      position: relative;
      opacity: 1;
      &::after {
        content: '';
        display: block;
        width: 20rpx;
        height: 4rpx;
        background: var(--primary-petrol, #2d3746);
        position: absolute;
        left: calc(50% - 10rpx);
        bottom: -4rpx;
      }
    }
  }
  .tips-num {
    width: 48rpx;
    height: 24rpx;
    position: relative;
    background-image: url('@/assets/coupon/Rectangle.png');
    margin-left: 8rpx;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    // background-position: -2px;
    // background-repeat: no-repeat;
    .num-content {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      left: 2px;
    }
  }
}
</style>
